<template>
  <div class="play_pk_types">
    <div
      class="play_pk_types_item"
      v-for="(item, index) in pkkeylist"
      :style="pktypesstyle(index)"
      :key="index"
    >
      <div class="play_pk_types_label">{{ item.type_name }}</div>
      <div class="play_pk_types_list">
        <el-row>
          <el-col class="list_col" :span="8" v-for="(item2, index2) in item.pk_type_obj" :key="index2">
            <el-checkbox-group v-model="noplacepktype">
              <el-checkbox :label="item2.label" :value="item2.value" />
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>

      <div class="all_select">
        <el-checkbox v-model="item.allselect" label="全选" @change="changeall(item)" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getpkkeydata } from '@/api/gendan'
import { onMounted } from 'vue'

const pkkeylist = ref([])
const checkdata = ref([])

const noplacepktype = defineModel({ type: Array })

const getpkkeylist = () => {
  getpkkeydata().then(res => {
    if (res.code == 200) {
      res.data.forEach(item => {
        item.allselect = []
      })
      pkkeylist.value = res.data
    }
  })
}

const pktypesstyle = index => {
  if (index != pkkeylist.value.length - 1) {
    if (index != 0) {
      return 'border-bottom: 1px solid #ebebeb;margin-top: 24px;'
    } else {
      return 'border-bottom: 1px solid #ebebeb;'
    }
  } else {
    return 'margin-top: 24px;'
  }
}
const changeall = item => {
  if (item.allselect.length > 0) {
    item.pk_type_obj.forEach(obj => {
      if (!noplacepktype.value.includes(obj.value)) {
        noplacepktype.value.push(obj.value)
      }
    })
  } else {
    item.pk_type_obj.forEach(obj => {
      const index = noplacepktype.value.indexOf(obj.value)
      if (index !== -1) {
        noplacepktype.value.splice(index, 1)
      }
    })
  }
}
onMounted(() => {
  getpkkeylist()
})
</script>

<style lang="scss" scoped>
.play_pk_types {
  width: 832px;
  //   height: 338px;
  padding: 24px 16px 0 16px;
  border-radius: 8px;
  border: solid 1px #ebebeb;
  display: flex;
  flex-direction: column;
}
.play_pk_types_item {
  display: flex;
  position: relative;
}
.all_select {
  position: absolute;
  right: 0;
  top: -25px;
}
.play_pk_types_label {
  width: 70px;
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #252a30;
}
.play_pk_types_list {
  flex: 1;
}
.list_col {
  margin-bottom: 24px;
}

::v-deep .list_col .el-checkbox {
  height: auto;
}
::v-deep .list_col .el-checkbox.is-checked .el-checkbox__label {
  font-family: PingFangSC;
  font-size: 14px;
  color: #252a30;
}
</style>